<!--
 * @Author: wangming
 * @Date: 2021-05-29 15:44:34
 * @LastEditors: wangming
 * @LastEditTime: 2022-04-25 16:52:18
 * @Description: file content
-->
<template>
  <div>
    <div class="mb10 pl5 ks-row-between">
      <div>表头字段</div>
      <el-checkbox :value="allbox" @input="changeall">全选</el-checkbox>
    </div>
    <draggable
      handle=".mover"
      :animation="200"
      :list="value.getEntitymodelList"
      :delay="20"
      chosen-class="drawing-chosen"
      drag-class="drawing-drag"
    >
      <DragTag
        :deleteDifferIds="value.deleteDifferIds"
        :addDifferIds="value.addDifferIds"
        v-model="i.showColumn"
        @change="(status) => changebox(index, status)"
        v-for="(i, index) in value.getEntitymodelList"
        :key="index"
        :item="i"
      >
        <i class="el-icon-rank mover poi"></i>
      </DragTag>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import basicmixins from "../basicmixins";
import DragTag from "./__components__/DragTag";
export default {
  components: { draggable, DragTag },
  mixins: [basicmixins],
  computed: {
    allbox() {
      return this.value.getEntitymodelList?.every((i) => i.showColumn);
    },
  },
  methods: {
    changebox(index, status) {
      if (status === "delete") {
        this.value.getEntitymodelList.splice(index, 1);
      }
    },
    changeall(v) {
      this.value.getEntitymodelList = this.value.getEntitymodelList.filter(
        (i) => {
          i.showColumn = v;
          return !~this.value.deleteDifferIds.indexOf(i.id);
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.mover {
  color: #409eff;
}
</style>
